<template>
  <div class="U_categorySort-template1" :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <div class="categorySort-main">
      <div class="category-one">
        <div
          class="category-one-item"
          v-for="(item, index) in datas.button_number"
          :key="index"
        >
          <img
            :src="emptyImage"
            alt=""
            :class="datas.button_number == 2 ? 'img-2' : 'img-5'"
          />
          <div class="category-text" v-show="datas.show_one_cate_name">
            一级分类
          </div>
        </div>
      </div>

      <div class="category-23">
        <img style="width:101%;" src="../../../resource/images/cateDomo.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import emptyImage from "@/resource/images/image.png";
const css = function () {
  if (this.datas.one_cate_radius) {
    const { one_cate_radius, one_cate_font } = this.datas;

    return `
          .component-${this.id} .category-one img{
              border-radius: ${one_cate_radius}px;
          }
          .component-${this.id} .category-one .category-text{
              font-size: ${one_cate_font}px;
          }
      `;
  }
};
export default {
  props: ["id", "datas", "styles"],
  data() {
    return {
      emptyImage,
    };
  },
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// 默认
.component-wrapper {
  width: 375px;
}
.categorySort-main {
  display: flex;
  flex-direction: column;
  .category-one {
    display: flex;
    justify-content: space-around;
    padding: 10px 10px 0;
    .category-one-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .img-5 {
      width: 40px;
      height: 40px;
    }
    .img-2 {
      width: 160px;
      height: 60px;
    }
    .category-text {
      line-height: 30px;
    }
  }
}
</style>
